<template>
  <div>
    <Form :model="standsModel" ref="standsBaseInfoForm" :label-width="120" label-colon inline :show-message="false">
      <FormItem label="显示平台" prop="platform" required>
        <Select v-model="standsModel.platform" class="input_item">
          <Option v-for="item in platforms" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
      </FormItem>
      <FormItem label="固定网址" prop="shortLinkName" :required="isPcPlatform || isUnionPlatform">
        <Input v-model.trim="standsModel.shortLinkName" class="input_item" placeholder="全部小写" @input.native="formatShortLink"></Input><br>
        <span >{{displayShortLink}}</span>
      </FormItem>
      <FormItem label="SEO" prop="disableSeo" class="one-line">
        <Checkbox v-model="standsModel.disableSeo">禁用SEO</Checkbox>
      </FormItem>

      <FormItem label="展厅内部名称" prop="name" required>
        <Input v-model.trim="standsModel.name" class="input_item" placeholder="内部属性，用户不可见"></Input>
      </FormItem>
      <FormItem label="标签" prop="tags">
        <Select v-model="standsModel.tags" class="input_item" multiple allow-create filterable placeholder="内部属性，用户不可见,可手动填写" @on-create="createTags">
          <Option v-for="(item, key) in tagList" :value="item" :key="key">{{item}}</Option>
        </Select>
      </FormItem>
      <FormItem label="备注" prop="note">
        <Input type="textarea" v-model="standsModel.note" placeholder="内部属性，用户不可见" class="input_item"></Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import common_data from "./js/stand/common_data";
import {isEmpty} from "../js/commonUtils";

export default {
  name: "HtmlStandForm",
  props: {
    standsModel: {type: Object, required: true},
    tagList: {type: Array, default(){return [];}},
  },
  data() {
    return {
      platforms: common_data.standsDic.platforms,
    }
  },
  computed: {
    isAppPlatform() {
      return this.standsModel.platform == common_data.standsDic.appPlatform;
    },
    isPcPlatform() {
      return this.standsModel.platform == common_data.standsDic.pcPlatform;
    },
    isUnionPlatform() {
      return this.standsModel.platform == common_data.standsDic.unionPlatform;
    },
    displayShortLink() {
      return this.$store.getters.webDomain + (isEmpty(this.standsModel.shortLink)?"":this.standsModel.shortLink);
    },
  },
  methods: {
    formatShortLink() {
      this.standsModel.shortLinkName = this.standsModel.shortLinkName.replaceAll(" ", "-").toLowerCase();
      this.standsModel.shortLink = isEmpty(this.standsModel.shortLinkName) ? "" : this.standsModel.shortLinkName + ".html";
    },
    createTags(val) {
      this.tagList.push(val);
    },
  },
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

.form-item {
  width: 420px;
  @media @mobile{
    width: 320px;
  }
}
.input_item{
  width:400px;
  @media @mobile{
    width: 200px;
  }
}
.input_item_long {
  width:740px;
  @media @mobile{
    width: 540px;
  }
}
.one-line {
  width: 100%;
}
</style>
